import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  NavLink,
} from 'react-router-dom';
// import { HashRouter as Router, Route, Link } from 'react-router-dom';

import './App.css';

const Home = () => <div>Home</div>;
const About = () => <div>About</div>;
const User = () => <div>User</div>;
const NotMatch = () => <div>404</div>;
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <div>about2</div>
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/user">
          <User />
        </Route>
        {/* 以上路由规则全都不匹配时，展示 404 页面 */}
        {/* 注意：这个路由需要放在最后，兜底 */}
        <Route>
          <NotMatch />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;
